<%@ page contentType="text/html; charset=UTF-8"%>
<% 
	String realPath = request.getContextPath();  
%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/>
	    <meta name="apple-mobile-web-app-capable" content="yes"/>
	    <meta name="apple-mobile-web-app-status-bar-style" content="black">
	    <title>南网图讯-首页</title>
	    <link type="text/css" href="<%=realPath%>/zenithsun/news/mobile/css/basic.css" rel="stylesheet">
	    <link type="text/css" href="<%=realPath%>/zenithsun/news/mobile/css/index.css" rel="stylesheet">
	    <script type="text/javascript" src="<%=realPath%>/baseNew/plugins/jQuery/jQuery-2.2.0.min.js"></script>
		<script src="<%=realPath%>/zenithsun/news/mobile/js/jquery.mobile-1.4.3.min.js"></script>
		<script src="<%=realPath%>/zenithsun/news/mobile/js/jquery-latest.min.js"></script>
		<script src="<%=realPath%>/zenithsun/news/mobile/js/iscroll.js"></script>
		<link type="text/css" href="<%=realPath%>/zenithsun/news/mobile/css/scroll.css" rel="stylesheet">

	<script type="text/javascript">
	var pageNum = 1,limit = 5,realPath='<%=realPath%>'; //页码
	var myScroll,
		pullDownEl, pullDownOffset,
		pullUpEl, pullUpOffset,
		generatedCount = 0;
	/**
		* 下拉刷新 （自定义实现此方法）
		* myScroll.refresh();		// 数据加载完成后，调用界面更新方法
		*/
	function pullDownAction () {
		/* setTimeout(function () {
		console.log("下拉刷新...");
			myScroll.refresh();		//数据加载完成后，调用界面更新方法   Remember to refresh when contents are loaded (ie: on ajax completion)
		}, 1000); */
		    pageNum = 1;
			$('#newsContainer').html('');
			doLoadNews();
			myScroll.refresh();
	}
	/**
		* 滚动翻页 （自定义实现此方法）
		* myScroll.refresh();		// 数据加载完成后，调用界面更新方法
		*/
	function pullUpAction () {
		/* setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
			console.log("上拉加载...");
			myScroll.refresh();		// 数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
		}, 1000); */	// <-- Simulate network congestion, remove setTimeout from production!
			$('#list').css('top','20px');   
		    pageNum = pageNum + 1;
			doLoadNews();
			$('#list').css('top','0px');
			myScroll.refresh();
	}
	/**
		* 初始化iScroll控件
		*/
	
		var flag=false;
		var ncId="${newscolumnId}";
		function doLoadNews() {
			$.post(realPath+"/path/newsinfo/listnewsjson", {"ncId":ncId,"pageNo":pageNum,"limit":limit},
				function(result) {
					if (result.state == 'Success') {
						createNewsByTemplate(result.content);
						$('#dataLoading').hide();
					} else {
						alert("操作失败,原因："+result.content);
					}
				}
			);
		}
		
		/**
		* 根据模板创建新闻信息
		*/
		function createNewsByTemplate(pageResult){
			if(pageResult.items.length>0){
				for(var index=0;index<pageResult.items.length;index++){
					var newsInfo=pageResult.items[index];
					var template=$("#newsTemplate").html();
					var currNews=template;
					currNews=template4one(currNews,newsInfo);
					$("#newsContainer").append(currNews);
				}
				//pageNum++;
			}else{
				$("#pullUpLabel").html('没有新闻了');
			}
		}
		
		function template4one(currNews,newsInfo){
			currNews=currNews.replaceAll("%news.id%",newsInfo.id);
			currNews=currNews.replaceAll("%news.coverPath%",newsInfo.coverPath);
			currNews=currNews.replaceAll("%news.title%",newsInfo.title);
			currNews=currNews.replaceAll("%news.picNum%",newsInfo.picNum+"张");
			currNews=currNews.replaceAll("%news.publishTime%",newsInfo.publishTime);
			currNews=currNews.replaceAll("%news.editor%",getNotBlank(newsInfo.editor));
			currNews=currNews.replaceAll("%news.photographer%",getNotBlank(newsInfo.photographer));
			currNews=currNews.replaceAll("%news.browseCount%",100);
			return currNews;
		}
		
		function getNotBlank(v){
			if(v==undefined){
				return "";
			}else{
				return v;

			}
		}
	function changePage(href){
		location.href=href;
	}
	String.prototype.replaceAll = function(s1, s2) {
		return this.replace(new RegExp(s1, "gm"), s2);
	}
	
	$(function(){
		pullDownEl = document.getElementById('pullDown');
		pullUpEl = document.getElementById('pullUp');
		pullDownOffset = pullDownEl.offsetHeight;
		pullUpOffset = pullUpEl.offsetHeight;
		var id='list';
		var yLen=30;
		var hei=document.getElementById(id).maxScrollY;
		myScroll = new iScroll(id, {
			useTransition: false,
			topOffset: pullDownOffset,
			onRefresh: function () {
				if (pullDownEl.className.match('loading')) {
					pullDownEl.className = '';
					//pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
				} else if (pullUpEl.className.match('loading')) {
					pullUpEl.className = '';
					//pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
				}
			},
			onScrollMove: function () {
				if (this.y >= yLen && !pullDownEl.className.match('flip')) {
					pullDownEl.className = 'flip';
					pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手开始更新...';
					this.minScrollY = 0;
				} else if (this.y < yLen && pullDownEl.className.match('flip')) {
					pullDownEl.className = '';
					pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
					this.minScrollY = -pullDownOffset;
				}
				else if (this.y < (this.maxScrollY - yLen) && !pullUpEl.className.match('flip')) {
					pullUpEl.className = 'flip';
					pullUpEl.querySelector('.pullUpLabel').innerHTML = '松手开始更新...';
					//this.maxScrollY = this.maxScrollY;hei
					this.maxScrollY = hei;
				} else if (this.y > (this.maxScrollY + yLen) && pullUpEl.className.match('flip')) {
					pullUpEl.className = '';
					pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
					this.maxScrollY = pullUpOffset;
				}
			},
			onScrollEnd: function () {
				if (pullDownEl.className.match('flip')) {
					pullDownEl.className = 'loading';
					pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...';				
					pullDownAction();	// Execute custom function (ajax call?)
				}
					else if (pullUpEl.className.match('flip')) {
					pullUpEl.className = 'loading';
					pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';				
					pullUpAction();	// Execute custom function (ajax call?)
				}
			}
		});
		//setTimeout(function () { document.getElementById(id).style.left = '0'; }, 800);
		doLoadNews();
	});
</script>
</head>
<body>
<div id="listPage" data-role="page" data-theme="a" >
		<div id="list" class="ui-content" role="main" style="padding:0px;">
			<div id="shishi" name="shishi"  class="listDiv"  >
				<div id="pullDown">
					<span class="pullDownIcon"></span>
					<span class="pullDownLabel">下拉刷新...</span>
				</div>
				<!--内容模块-->
					<div class="main-content">
					    <section class="ind-list-grid" id="newsContainer">
					    </section>
						<div class="main-content">
						    <section class="ind-list-grid" id="newsContainer">
						    </section>
							<div id="newsTemplate" style="display: none;">
						        <div class="mod-img-area">
						            <a href="javascript:changePage('<%=realPath%>/path/newsinfo/viewnewsphone?id=%news.id%');" class="mod-link-btn fn-pr">
						                <img src="<%=realPath%>%news.coverPath%">
						                <div class="mod-img-info-grid">
						                    <div class="mod-wrap">
						                        <h2 title="" class="mod-img-title fn-wto">%news.title%</h2>
						                        <div class="mod-img-desc clearfix">
						                            <p class="fn-fl fn-wto">编辑：%news.editor% / 摄影：%news.photographer%</p>
						                            <p class="fn-fr fn-wto">
						                                <span class="ind-time fn-fr">%news.publishTime%</span>
						                                <span class="ind-num fn-fr fn-dn"><i class="i-eye"></i>%news.browseCount%</span>
						                            </p>
						                        </div>
						                    </div>
						                </div>
						            </a>
						        </div>
							</div>
						    <div class="mod-load-txt j-loadingTxt" id="dataLoading">
								<i class="icon-spinner icon-spin"></i>数据加载中...
							</div>
						</div>
					</div>
					<!-- /content -->
				<div id="pullUp">
					<span class="pullUpIcon"></span>
					<span class="pullUpLabel" id="pullUpLabel"></span>
				</div>
			</div>
		</div>
	</div>
</body>
</html>